<script src="/assets/notes.js" type="text/javascript"></script>
<div class="col-lg-9 note-show<% if @node.status == 4 || @node.status == 0 %> moderated<% end %>">
  <% if @preview %><div class="alert alert-info"><%= raw translation('notes.show.preview') %></div><% end %>
  <% if current_user && @node.tags.size == 0 && !@preview %><div class="alert alert-warning"><%= raw translation('notes.show.note_no_tags', url: 'javascript: document.getElementById("tags-open").click();') %></div><% end %>  
  <% if @node.has_power_tag('status:candidate') %><div class="alert alert-info">This was marked as a candidate activity -- <a href="https://publiclab.org/notes/warren/09-17-2016/what-makes-a-good-activity" >read about how to adapt its content</a> into a fully-fledged, step-by-step activity that can be easily replicated.</div><% end %>
  <% if @node.has_power_tag('replication') %><div class="alert alert-info"><%= raw translation('notes.show.replication') %> <a href="/n/<% if !@preview %><%= @node.power_tag('replication') %><% end %>"><%= raw translation('notes.show.replication_link') %></a>.</div><% end %>
  <% if @node.has_power_tag('series') %><div class="alert alert-info"><%= raw translation('notes.show.series') %> <a href="/tag/series:<% if !@preview %><%= @node.power_tag('series')%>"><%= @node.power_tag('series') %><% end %></a>.</div><% end %>
  <% if @node.has_power_tag('build') %><div class="alert alert-info"><%= raw translation('notes.show.build') %> <a href="/n/<% if !@preview %><%= @node.power_tag('build') %><% end %>"><%= raw translation('notes.show.build_link') %></a>.</div><% end %>

  <% if @node.has_power_tag('alert') && feature("alert-#{@node.power_tag('alert')}") != "" && !@preview %>
    <%= feature("alert-#{@node.power_tag('alert')}") %>
  <% end %>
  <% if @node.has_power_tag('with')  && current_user && @node&.coauthors&.collect(&:username)&.include?(current_user.username) && !@preview  %> <div class="alert alert-success"> You are a coauthor of this post. This attributes your contribution, and gives you edit access to the note. <a href="https://publiclab.org/wiki/power-tags#Coauthorship"> Learn more </a></div><% end %>
  <% if @node.has_power_tag('upgrade') %><div class="alert alert-success"> This is an upgrade for <% if !@preview %><a href="/<%= @node.power_tag('upgrade') %>"><%= @node.power_tag('upgrade') %></a>.<% end %> Try building it and <% if !@preview %><a href="/n/<%= @node.power_tag('upgrade') %>"><% end %> report back </a>how it goes.</div><% end %>
  <div class="d-print-block" style="display:none;margin-bottom:3%">
  <span> <h1 style="display:inline-block;">Public Lab </h1> <h3 style="display:inline-block;">Research note</h3></span>
  </div>

  <% main_image = @preview? @img : @node.main_image %>

  <% if main_image %>
    <% img_path = main_image.path(main_image.photo_file_name == "blob" ? :original : :large) # special case for "blob" images, see https://github.com/publiclab/plots2/issues/10210 %>
    <a class="main-image" style="max-width:100%;width:800px;" href="<%= main_image.path(:original) %>">
      <%= image_tag(img_path, class:"rounded d-none d-lg-inline d-print-block", style:'max-height:600px;max-width:100%;', lazy: main_image.photo_file_name != "blob") %>
      <%= image_tag(img_path, class:"rounded d-lg-none d-print-none", style:'width:100%;', lazy: main_image.photo_file_name != "blob") %>
    </a>
    <!--<div class="expand"><a onClick="$('.main-image').toggleClass('compressed');"><i class="fa fa-angle-down"></i></a></div>-->
  <% end %>

  <% if @node.has_tag('locked') %>
    <h1 style="margin-top: 40px;"><%= @node.title %>&nbsp;<span data-toggle="tooltip" title="Only admins/moderators can add tags on locked content." class="fa fa-lock"></span></h1>
  <% else %>
    <h1 style="margin-top: 40px;"><%= @node.title %></h1>
  <% end %>

  <div id="note-info">

    <span>
      <% if @node.status == 0 || @node.status == 4 %><span class="badge badge-danger"><%= translation('notes.show.unpublished') %></span> | <% end %>
      <% if @node.status == 3 %><span class="badge badge-success">Draft</span> | <% end %>
      by <a href="/profile/<%= @node.author.name %>"><%= @node.author.name %></a> <%= @node.author.new_contributor %>
      <% if @node.has_power_tag('with') %>, <% @node&.coauthors&.each_with_index do |coauthor,i| %>
              <a href="/profile/<%= coauthor.username %>">
                <%= coauthor.username%></a> <%= coauthor.new_contributor %>
              <%= ',' if i < @node.coauthors.size-1 %><% end %><% end %>
              <% if current_user && current_user.id == @node.uid  && !@preview %><a class="d-print-none" aria-label="Add Coauthor" onClick="promptTag('with:')" href="#"><i style="color:#aaa;" class="fa fa-pencil"></i></a><% end %> |

      <span class="d-none d-lg-inline d-print-none">
        <%= @preview ? Time.new.strftime("%B %d, %Y %H:%M:%S") : @node.created_at.to_s(:long) %>
      </span>
      <span class="d-xl-none">
        <%= @preview ? Time.new.strftime("%B %d, %Y %H:%M:%S") : @node.created_at.to_s(:short) %>
      </span>
      <a class="d-lg-none collapse-btn d-print-none" data-toggle="collapse" href="#collapse-info" role="button" aria-expanded="false" aria-controls="collapse-info" id="collapse-button">...</a>
      <span class="collapse collapse-info" id="collapse-info">
        | <a aria-label="Link to note" href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
      </span>
      <span class="d-none d-lg-inline d-print-none">
        | <a aria-label="Link to note" href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
      </span>
    </span>

  </div>

  <hr style="margin-top:10px;" />

  <% @node.power_tag_objects('barnstar').each do |tag| %>
    <p style="color:#aaa;"><i style="color:#db4;" class="fa fa-large fa fa-star-o"></i> <i><%= raw translation('notes.show.barnstar_awarded_to_by', :url1 => "/profile/"+@node.author.name, :author => @node.author.name, :url2 => "/wiki/barnstars#"+tag.name.split('-').each{|w| w.capitalize!}.join('+'), :barnstar => tag.name.split(':').last.split('-').each{|w| w.capitalize!}.join(' '), :url3 => "/profile/"+tag.author.username, :awarder => tag.author.username) %></i></p>
    <hr />
  <% end %>

  <div id="content" class="pl-content note">
    <% body = @preview ? @body.render_body : @node.latest.render_body %>
    <%= raw auto_link(insert_extras(body), :sanitize => false) %>
  </div>

  <% if @node.files && @node.files.size > 0 %>
    <table id="files" class="table">
      <tr>
        <%= raw translation('notes.show.file_table') %>
      </tr>
      <% @node.files.each do |file| %>
        <tr>
          <td><a href="<%= file.path %>"><i style="text-decoration:none;" class="fa fa-file"></i><span style="text-decoration:none;"> </span><%= file.filename %></a></td>
          <td><%= number_to_human_size(file.filesize) %></td>
          <td><%= Time.at(file.timestamp).to_s %></td>
        </tr>
      <% end %>
    </table>
  <% end %>
  <% if current_user && 
   ( current_user.can_moderate? || 
     current_user.id == @node.id || current_user.is_coauthor?(@node) ) && 
      @node.has_tag('event') %>
  <hr/>
  <p>This looks like an event.
    <% unless @node.has_power_tag('date') %>
      <span><button id = "date-toggle" class = "btn-outline-secondary btn-sm"data-toggle="tooltip" data-placement="right" title="Add Date"><i class="fa fa-calendar" aria-hidden="true"></i></button></span>
    <% end %>
  <p>
  <div id="event-datepicker">
    <input type="text" class="datepicker" aria-describedby="DatePickerGuide"/>

    <span><button id="save-event-date" class="btn-outline-secondary btn-sm">Save Date</button></span>
    <small id="DatePickerGuide" class="form-text text-muted">
      Add date to your awesome event in this box
    </small>

    <div class="toast fade alert alert-success" id="mytoast" role="alert" aria-live="assertive" aria-atomic="true">
    Date added successfully
    </div>

  </div>
  <% end %>

  <div class="d-print-none">
    <hr />

   <% if !@preview %>
      <% if @node.has_power_tag('prompt') && feature("prompt-#{@node.power_tag('prompt')}") != "" %>
        <% if current_user && (current_user.id == @node.uid || current_user.admin? || current_user.moderator? || current_user.is_coauthor?(@node)) %>
          <%= feature("prompt-#{@node.power_tag('prompt')}") %>
        <% end %>
      <% end %>
   <% end %>

    <% if @node.has_tag('event:rsvp') %>
      <p><b><% if @node.has_power_tag('date') %>
        <script>
          jQuery(document).ready(function() {
            cal = ics();
            cal.addEvent('<%= @node.latest.title || @node.title %>', false, false, '<%= @node.power_tag('date') || @event_date %>', '<%= @node.power_tag('date') || @event_date %>');
          })
        </script>
        <i class="fa fa-calendar"></i> <%= raw translation('notes.show.event_is_on', :date => @node.power_tag('date') || @event_date) %> <% end %></b>
        <a class="label" onClick="cal.download()"><%= translation('notes.show.ical') %></a>
      </p><br />
      <p><% if !current_user %><%= raw translation('notes.show.login_to', :url1 => new_user_session_path( return_to: request.path )) %> <% end %><a class="btn-lg btn-primary" href="/rsvp/<%= @node.id %>">RSVP</a>
        <% attendees = @preview ? 0 : @node.power_tags('rsvp').size %>
        <% if attendees > 1 %>
          <%= translation('notes.show.people_will_attend', :count => attendees).html_safe %>
        <% end %>
      <hr />
    <% end %>
    <% if !@preview %>
      <%= render partial: "notes/responses" %>
      <% if @react %>
        <%= react_component("App", { 
          initialComments: @react_props[:comments],
          currentUser: @react_props[:currentUser],
          elementText: @react_props[:elementText],
          node: @react_props[:node]
        }) %>
      <% else %>
        <div id="legacy-editor-container"><%= render partial: "notes/comments" %></div>
      <% end %>
    <% end %>
  </div>

</div><!--/span-->
<%= render partial: "sidebar/related" %>

<style>
  .collapse.in {
      display: unset;
  }
  @media (min-width: 1000px){
    .collapse-info {
        display: none !important;
    }
  }
  .collapse-btn{
    padding: 0.2em 0.4em;
    margin: 0;
    font-size: 85%;
    background-color: rgba(27, 31, 35, 0.14);
    border-radius: 3px;
  }
</style>
